Please note, that the content model of footer has now been updated to reflect that of header, so you can have navs & headings in your footers. For more information, please read my updated article The Footer Element Update. and read the tracking note.
For some time now we’ve become accustomed to seeing <div id="footer"> at the bottom of web pages but with the introduction of HTML 5 it’s time to say goodbye. With the addition of the new <footer> element we now have more scope and flexibility.
According to the spec
The
footerelement represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Lets get started
Before we get stuck into dissecting the new element, let’s lay the foundations for the article and cover the basics. As we’ve already mentioned above, most people would have laid out the footer as follows
<div id="footer">
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
<div>
However with the creation of HTML 5 this is no longer the case. As you may already know, there is now no longer the need for the <div> element for many elements. In our case, when referring to the footer, the appropriate markup would be <footer>
<footer>
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
</footer>
As I mentioned in the first paragraph, originally the <footer> element was only utilised once within our pages but with the introduction of the new element, this no longer needs to be the case. The <footer> element can now be used multiple times and to display all the extra information.
Using the footer element
An important point to note is that you are not restricted to use one <footer> element per site, you can use multiple footers, each of which will then become the <footer> for that section of the document. You could therefore have
Section
<section>
Section content appears here.
<footer>
Footer information for section.
</footer>
</section>
Article
<article>
Article content appears here.
<footer>
Footer information for article.
</footer>
</article>
To see an example of the <footer> within an article/section look no further than this very page. Scroll down beyond the article and you will notice the light grey text section, which falls directly after the “further reading”. This grey text section which gives information about trackbacks, responses, tags and categories is infact using the footer element.
Footer
We’ve already outlined what the new footer can look like above.
Other Thoughts
I was initially thrown off-course by the presentational name of the element; my use here isn’t at the bottom of the page, or even at the bottom of the article, but it certainly seems to fit the bill – it’s information about its section, containing author name, links to related documents (comments) and the like. There’s no reason that you can’t have more than one footer on page; the spec’s description says “the footer element represents a footer for the section it applies to” and a page may have any number of sections. The spec also says “Footers don’t necessarily have to appear at the end of a section, though they usually do.”
Bruce Lawson – http://www.brucelawson.co.uk/2009/marking-up-a-blog-with-html-5-part-2/
Conclusion
The footer element offers the chance to define web pages giving them the correct semantic mark-up that they deserve but it’s vital to use these new found tags as they were intended for. Let’s not get carried away and misuse this tag like we have done with tables and divs.
24 Responses on the article “The footer element”
Thanks for writing.
As the footer-element and the aside-element both contain meta data on their section, I can imagine it’s sometimes hard to choose between the two. Rule of the thumb: use asides within the flow of the section (i.e. pull quotes) and footers at the start or end (i.e. author, tags,…)?
so, how to create simple website using footer/header if current code is:
…
[body]
[div id=”header”]-logo-menu-etc-[/div]
[div id=”content”]…[/div]
[div id=”footer”]-contact-copy-about-etc[/div]
[/div]
?
@Thomas good point regarding the footer being able to go above the content aswell as below. I just wanted to keep this article nice and simple but now you’ve mentioned it I think I might add that in.
@mth there’s a blog post coming very soon about that :)
Don’t you think “authorblurb” at this page maybe should be a footer? Or an aside?
@Jacob the author info is within a footer element on this page. The footer also contains the articles meta data which is why the authorblurb div exists. Hope that helps.
I’ll admit to a fair amount of confusion on my part regarding the new HTML5 header, footer, section, aside. Those elements which have quite specific structural meanings and are touted as replacements for “div id=footer” as above but are also non-unique page elements. Won;t this mean that we end up writing markup such as “footer id=somefooter” or do we rely on inheritance? Even inheritance would require a specific ID in many cases and could also make for some overly complex inheritance chains?
Much of HTML5 is very promising and there is clearly a push for it as there was XHTML years back but I have been confused by these more presentationally-named elements.
I am very happy to be schooled on this and welcome this site as a guide and a place to discuss these questions further.
@Davin – I can see what you are getting at here. On my own personal site, in the link above, I have attached ids to my HTML 5 elements. I personally don’t really see a problem doing this. However, I would like to point out that my site is far from perfect in HTML 5 terms. I was developing it as I was reading into the spec, I’ll need to get back round to refining all of my code.
If you are working on a large site which will require alot of foundation work before you start the build, then it would probably be for the best if you applied ids to certain elements. However, you really have to think long and hard about whether you actually need to apply ids/classes to the elements or not.
I know that this site uses elements such as
nav class="nav-footer",section id="footer",section id="comments"I’ll double check with some of the other authors on here and see what their opinions are, hopefully the same as my own.
While not really an outright problem, I just find that these new (and I use the word “new” even though these have been bouncing around in the spec for years now) elements are given more than their due in working towards semantics. Each time I see an article promoting these elements as a leap forward, I’m not convinced.
Now, unless I’m wrong, I assume I could publish HTML5 documents and not use any of these so this is more of a er… semantic point for me but these elements just seem needlessly specific. While the issue some have with DIV is that it is quite non-specific in meaning, I prefer that the ID play that role—marking the specific/unique nature for DIV and other elements.
I think with these elements, we’ll still end up using DIV in places that don’t match what seems to be the suggested meaning of header, footer, etc. Add to that that these new elements will sometimes be unique to a page and sometimes made unique by the addition of an ID. feels like that will be far more of a hodge podge than simply using DIV with semantic unique ID.
Just the way I’m seeing it anyway. If these elements weren’t presented as such a solution, I don’t think I would internally rail against them as much as I do.
@Davin yes you can oublish an HTML 5 doc and not use header/footer etc.
I don’t think there is anything wrong with using divs. But I think most of the time, divs to represent a section, so to me it makes sense to put it in a section tag.
But HTML 5 is still being developed and people are testing it and having a play so there is no harm in trying it out :)
I like the idea, but think that the names ‘footer’ and ‘header’ are not really semantic but more presentational.
I would prefer to see something like Andy Clarke’s ‘branding’ and ‘site-info’.
Not that those would not have their own set of problems of course.
Looks like you’re not escaping your in your title there.
Thanks for pointing the escaping problem out, it’s something w’re working to fix, thought I had a solution but obviously not! Have reset the titles for now without angle brackets to make sure everyone can read it.
According to spec, a footer is referred to ‘sectioning content’. But in the first part of this article it is used as a footer in the navigational sense (i.e. the footer that is in every page and has the links to copyright, sitemap, etc.). While this is much closer to the real usage of “div=’footer'” found around the web, I do not think that it conforms to the spec. Apparently, the first ‘footer’ should be changed to a ‘nav’.
Most people think of those ‘header’ and ‘footer’ elements from a presentational point of view, but they seem intended for sections inside documents that have a more formal structure than the average html page. Given that the semantics are the main reason to use footer (or header) over div, IMHO this should be clearer in the spec.
@Carlos
Regarding the footer as a nav in your first paragraph, you’re absolutely correct. I hadn’t really noticed this and I’m surprised that it hasn’t be pulled up sooner. However, the first example was just a quick one to show readers how the new element looks. I could have put a nav tag in there, but that would have over complicated the first introductory example.
Thank you for this tutorial that clarifies it!
And If you want to do many skins
the menu on top or on the left , the footer at the bottom but sometimes on the right ?
@Loick
The uses you mention seem to be for the ‘nav’ element, and not for headers or footers. The new elements are semantic, not presentational.
anyway I can use section for everything
thank you Carlos
@Loick Please don’t use “section for everything” what’s the point in having all these elements if you’re not going to utilise them correctly?
ok Jack , I find it very interesting and I shall try it soon, but I keep coding XHTML and not
@Loick
If you use ‘section’ for everything, in the future this may have consequences for the search engine relevance of your pages. For example, if I do a search for ‘foo bar’ and your document has one section with a ‘foo’ and then another with a ‘bar’, this is likely to be considered a less relevant match than another document where both ‘foo’ and ‘bar’ appear inside the same section (or even with no sections but inside the same ‘div’).
This is an over-simplified example, and I do not think that search engines do this yet, but these semantic elements are being introduced precisely with this intention. At present, writing XHTML does not harm, but in the future HTML5 markup may have slightly better search relevance, and then people will want HTML5 on their websites. As Jack mentions, this also depends on people using the markup correctly.
but I t hink XHML5 is the way to go
thank you
[…] http://html5doctor.com/the-footer-element/ […]
[…] Liens vers l’article L’élément footer en anglais […]